import 'package:animation_study_flutter/pages/implicit_animation_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: '动画学习'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<ExpansionPanelItem> list;
  List<String> list1 = [
    "1，两行代码就能动起来",
    "2，在不同控件之间切换的过渡动画",
    "3，更多动画控件及曲线（Curves）",
    "4,内置的还不够？万能的补间动画",
    "5，实例（上）：翻滚吧！计数器！",
    "6.实例（下）：一枚动画控件的诞生"
  ];
  List<String> list2 = [
    "1，可以无尽旋转的显式动画",
    "2，动画控制器到底是个什么东西",
    "3，控制器串联补间（Tween）和曲线",
    "4，交错动画！管理区间和曲线",
    "5，内置的又不够？万能的自定义动画",
    "6，实例（上）：478呼吸法的动画演示",
    "7，实例（下）：多个动画控制器的示范"
  ];
  List<String> list3 = [
    "1，flutter动画背后的机制和原理",
    "2，Hero动画（主动画）",
    "3,直接操作底层的CustomPainter",
    "4,嵌入式Rive/Flare插件动画",
    "5,番外篇：用Rive/Flare制作一枚硬币"
  ];

  @override
  void initState() {
    super.initState();
    list = [
      ExpansionPanelItem(
          headerText: "1,隐式动画（全自动）", listContent: list1, isExpanded: false),
      ExpansionPanelItem(
          headerText: "2,显式动画（手动控制）", listContent: list2, isExpanded: false),
      ExpansionPanelItem(
          headerText: "3,其他动画", listContent: list3, isExpanded: false)
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
                padding: const EdgeInsets.all(10),
                child: ExpansionPanelList(
                  expansionCallback: (index, isExpanded) =>
                      setState(() => list[index].isExpanded = !isExpanded),
                  children: list.map((ExpansionPanelItem item) {
                    return ExpansionPanel(
                        headerBuilder: (BuildContext context, bool isExpanded) {
                          return Container(
                            padding: const EdgeInsets.all(16),
                            child: Text(item.headerText,
                                style: Theme.of(context).textTheme.subtitle1),
                          );
                        },
                        body: ListView.builder(
                            physics: const NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            itemCount: item.listContent.length,
                            itemBuilder: (context, position) {
                              return InkWell(
                                child: Card(
                                  elevation: 3,
                                  color: Colors.orange[100],
                                  child: Container(
                                    padding: const EdgeInsets.all(10),
                                    child: Text(item.listContent[position],
                                        style: Theme.of(context)
                                            .textTheme
                                            .bodyText1),
                                  ),
                                ),
                                onTap: () => itemOnTap(item.headerText,
                                    item.listContent[position], position),
                              );
                            }),
                        isExpanded: item.isExpanded);
                  }).toList(),
                ))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  ///index title 的下标
  ///position 是 item的下标
  itemOnTap(title, name, position) {
    if (title == "1,隐式动画（全自动）") {
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) =>
                  ImplicitAnimationPage(title: name, tagPage: position)));
    }
  }
}

class ExpansionPanelItem {
  final String headerText;
  final List<String> listContent;
  bool isExpanded;

  ExpansionPanelItem(
      {required this.headerText,
      required this.listContent,
      required this.isExpanded});
}
